import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux';
import { useToast } from "@/utils/toast"
import "./Login.less"
import { LoginApi } from "@/request/api"
import logo from "@/assets/images/logo.png"
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import { useNavigate } from 'react-router-dom';



export default function Login() {
  let toast = useToast()
  let navigate = useNavigate()
  let dispatch = useDispatch()
  //定义
  let [username, setUserName] = useState("")
  let [password, setPassWord] = useState("wolfcode123")
  const Login = async () => {
    let res = await LoginApi({
      username,
      password
    })
    console.log(res);
    if (res.errCode === 0) {
      //dispatch(修改isshow)
      toast("success", "登录成功")
      //存一下token
      sessionStorage.setItem("token", res.data)
      navigate("/home")//跳转页面
    }
  }

  // useEffect(() => {
  //   Login()//登录请求的函数
  // }, [])


  return (
    <div className='login'>
      <img src={logo} alt="" />
      <p className='loginpage'>Login Page</p>
      <div className='login-box'>
        <TextField className='TextField' id="outlined-basic" onChange={(v) => {
          setUserName(v.target.value)
        }} label="手机号" variant="outlined" />
        <TextField className='TextField' type="password" id="outlined-basic" onChange={(v) => {
          setPassWord(v.target.value)
        }} label="密码" variant="outlined" />
        <Button className='btn' variant="contained" onClick={Login}>登录</Button>
        <div className='gowhere'>
          <div className='qwzc' onClick={() => {
            navigate("/reg")
          }}>前往注册</div>
          <div className='fhsy' onClick={() => {
            navigate("/home")
          }}>返回首页</div>
        </div>
        <div className='copy'>Copyright</div>
      </div>
    </div>
  )
}
